<template>
    <div class="main">
      <div class="chefInfo" >
        <a href="#">
          <img src="../../../../static/images/vege/bgm.jpg">
        </a>
      </div>
      <div class="divspan">
          <span>商家名称：西红柿首富</span>
          <span>商家介绍：致力于生态自然，无污染，绿色健康食材</span>
          <span>联系方式：88888888888</span>
          <span>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：29804920@qq.com</span>
          <span>地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：四川省成都市成龙泉驿区**** </span>
      </div>
    </div>
</template>

<script>
  import api from "../../../../axios/api";

    export default {
        name: "introduce",
      data(){
          return{
            chefs:[]
        }
      },
      methods: {
        setDataFromAxios: function () {
          //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
          api.setDataFromAxios("/chefImg", null, "post")
            .then(res => {
              // console.log(res)
              this.chefs = res;
              console.log(res)
              // console.log(this.chefs.name)
            });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
        }
      },
      created() {
        this.setDataFromAxios();
      }
    }
</script>

<style scoped lang="stylus">
  .main
    content:""
    display:block
    clear:both  // 给父元素添加伪类清除浮动
    margin 0 auto
    width 1000px
    height 310
    //background url("/static/images/vege/14.jpg")
    //background-size 1020px 330px
    //opacity:0.7;
    .chefInfo
      margin 10px 0 0 50px;
      text-align center
      float left
      width 200px
      height 277px
      position: relative
      overflow: hidden
      border-radius 10px
      img
        width:200px
        height :277px
    .divspan
       margin-top 30px
       width 735px
       height 275px
       float right
       display table
       span
         display: block
         margin-left 60px
         font-size 18px
         line-height 46px
         font-family "微软雅黑"








</style>
